import React, { Component } from 'react'
import { connect } from 'react-redux'
import { Query } from 'react-apollo'
import { push } from 'connected-react-router'
import { Button, Label } from 'semantic-ui-react'
import { global as globalDuck } from 'ducks'
import ListTable from 'components/ListTable'
import getMembersItemPageInfo from 'graphql/user/getOrgMemberPage.graphql'
import getMembers from 'graphql/user/getOrgMembers.graphql'
import getPendingMemberNumber from 'graphql/user/getPendingMemberNumber.graphql'

const FileList = getUrl => ({ data }) => (
  <React.Fragment>
    {data.org_member.map(member => (
      <ListTable.Row link={getUrl(member.name)}>
        <ListTable.Avatar src={member.user_object.avatar} text={member.name} />
        <ListTable.Cell>{member.role}</ListTable.Cell>
        <ListTable.Cell>{member.create_at}</ListTable.Cell>
      </ListTable.Row>
    ))}
  </React.Fragment>
)

class DatasetData extends Component {
  componentDidMount = () => {}

  render() {
    const { match, org, link } = this.props
    const orgName = org.owner_object.name
    const orgId = org.owner_object.id
    let { path } = match.params
    path = path || ''
    const RenderList = FileList((name) => {
      return `/org/${orgName}/user/members/edit/${name}`
    })
    const inviteUrl = path
      ? `/org/${orgName}/user/members/invite/new/${path}`
      : `/org/${orgName}/user/members/invite/new`
    return (
      <ListTable
        globalActions={[]}
        extraAction={(
          <Query
            query={getPendingMemberNumber}
            variables={{ id: orgId }}
            fetchPolicy="network-only"
          >
            {({ loading, error, data }) => {
              if (loading) return 'Loading...'
              if (error) return `Error! ${error.message}`
              if (data.org_member_aggregate.aggregate.count === 0) return null
              return (
                <Button
                  as="div"
                  labelPosition="right"
                  size="small"
                  onClick={() => {
                    link(`/org/${orgName}/user/members/invite/list`)
                  }}
                >
                  <Button color="blue" size="small">
                    待确认成员
                  </Button>
                  <Label as="a" basic color="blue" pointing="left" size="small">
                    {data.org_member_aggregate.aggregate.count}
                  </Label>
                </Button>
              )
            }}
          </Query>
)}
        search={{ text: '搜索成员' }}
        sort
        pagination={{
          query: getMembersItemPageInfo,
          name: 'org_member_aggregate',
          variables: {
            ownerId: orgId,
          },
        }}
        listData={{
          query: getMembers,
          variables: {
            ownerId: orgId,
            order: [],
            limit: 10,
          },
          header: (
            <ListTable.Header>
              <ListTable.HeaderCell
                style={{
                  wordBreak: 'keep-all',
                  whiteSpace: 'nowrap',
                }}
              >
                名称
              </ListTable.HeaderCell>
              <ListTable.HeaderCell />
              <ListTable.HeaderCell>角色</ListTable.HeaderCell>
              <ListTable.HeaderCell>加入时间</ListTable.HeaderCell>
            </ListTable.Header>
          ),
          render: <RenderList />,
        }}
        holder={{
          description: '当前组织下没有成员',
          action: {
            text: '邀请成员',
            url: inviteUrl,
          },
        }}
      />
    )
  }
}

const mapStateToProps = state => ({
  user: globalDuck.selectors.user(state),
})

const mapDispatchToProps = {
  link: path => push(path),
}

export default connect(
  mapStateToProps,
  mapDispatchToProps,
)(DatasetData)
